<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		
		<div class="navlist">
			
		</div>
		<div class="navli">
				<a href="index.html">首　页</a>
				<a href="project.html">产品介绍</a>
				<a href="tryout.html">免费试用</a>
				<a href="agent.html">代理加盟</a>
				<a href="about.html">关于我们</a>
				<div class="down">
					<p>- 小辞店商户APP下载 -</p>
					<a>Android下载</a>
					<a>App Store下载</a>
				</div>
			</div>
		
		<div class="bodynav">
			
		
		
		<header class="flexBetween">
			<img class="logo" src="img/logo.png"><div class="navflow"><img class="navicon" src="svg/nav.svg"></img></div>
		</header>
		  
		  
		  
		  
		  <!--<div class="project">
		  	<style type="text/css">
    		.simgpage span.swiper-pagination-bullet-active{background: rgba(255,255,255,.5);}
    		
    	</style>
			  <div class="swiper-wrapper projectbox">
			    <div class="swiper-slide"></div>
			    <div class="swiper-slide"></div>
			    <div class="swiper-slide"></div>
			    <div class="swiper-slide"></div>
			    <div class="swiper-slide"></div>
			    <div class="swiper-slide"></div>
			  </div>
			  <div class="swiper-pagination simgpage"></div>
			</div>-->
			
			
			<!-- Demo styles -->
  <style>
	html,body{overflow: hidden;}
    .parallax-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 600%;
      background-size:100%;
    }


  </style>

			
			
			<!-- Swiper -->
  <div class="project">
    <div class="parallax-bg" style="background-image:url(img/projectbg.png)" data-swiper-parallax="-40%"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="text" data-swiper-parallax="-800">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="text" data-swiper-parallax="-800">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="text" data-swiper-parallax="-800">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="text" data-swiper-parallax="-800">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="text" data-swiper-parallax="-800">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="text" data-swiper-parallax="-800">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
        </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
  </div>

		 
		  
		 
		  
		 
		  
		
		  
		  
		  
		
		</div>
		<script src="js/swiper.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var swiper = new Swiper('.project',{
					direction : 'vertical',
						pagination: {
						    el: '.swiper-pagination',
						  },
						  speed: 600,
      					  parallax: true,


				})
				
				
		
				


				
				
				
				$(".navflow").click(function(){
					$(".navlist").show();
					$(".navli,.bodynav").addClass("bodyleft")
					$(".header").addClass("bodyleft")
				});
				$(".navlist").click(function(){
					$(".navlist").hide();
					$(".navli,.bodynav").removeClass("bodyleft")
					$(".header").removeClass("bodyleft")
				})
				
				
				
				

					$("body").scroll(function() {
				    if ($("#showscroll").offset().top <= 0) {
				    	$("header").addClass("header")
				    } else{
				    	$("header").removeClass("header")
				    }
				  });			
		
			
			})
			
			
			
	
			
			
			
			
		</script>
	</body>
</html>
